<template>
  <div
    class="view-model-content"
    style="width: 100%; display: inline-block; height: 99%"
  >
    <!-- <el-scrollbar style="height:100%;"> -->
    <div class="links">
      <div
        class="item"
        :color="activedIndex == index ? 'red' : '#2d8cf0'"
        :class="{ actived: index == activedIndex }"
        v-for="(item, index) in timeline"
        :key="index"
      >
        <span @click="change(item, index)" :class="{ new: item.new }">{{
          item.text
        }}</span>
      </div>
    </div>
    <div style="display: none" class="doc-menu">
      <div @click="drawerModel = true"><Icon type="ios-list" /> Vol.Vue</div>
      <Drawer
        title="文档"
        placement="left"
        :closable="false"
        v-model="drawerModel"
      >
        <div
          class="item"
          style="padding: 0.5rem; font-size: 1rem"
          :color="activedIndex == index ? 'red' : '#2d8cf0'"
          :class="{ actived: index == activedIndex }"
          v-show="index > 0"
          v-for="(item, index) in timeline"
          :key="index"
        >
          <span
            @click="
              () => {
                drawerModel = false;
                change(item, index);
              }
            "
            :class="{ new: item.new }"
            >{{ item.text }}</span
          >
        </div>
      </Drawer>
    </div>
    <div>
      <div
        class="content"
        :class="{
          'doc-api':
            activedIndex > 0 && timeline[activedIndex].text == '组件api'
        }"
      >
        <!-- <Divider>{{text}}</Divider> -->
        <router-view></router-view>
      </div>
    </div>
    <!-- </el-scrollbar> -->
  </div>
</template>
<script>
import './doc.less';
export default {
  methods: {
    change(item, index) {
      if (!item.path) {
        window.open('https://api.volcore.xyz/doc/app.html', 'blank');
        return;
      }
      if (item.text == '框架介绍') {
        window.open('https://www.cnblogs.com/-clouds/p/11633786.html');
        return;
      }
      if (item.path == '#') {
        return this.$Message.error('框架1.0文档正在整理中...');
      }
      this.activedIndex = index;
      this.text = item.text;
      this.$router.push({ path: item.path });
    }
  },
  created() {
    let path = this.$route.path;
    for (let index = 0; index < this.timeline.length; index++) {
      if (this.timeline[index].path == path) {
        this.activedIndex = index;
      }
    }
    this.text = this.timeline[this.activedIndex].text;
    // this.$Notice.success({
    //               title: '文档更新提示',
    //               desc: '文档已在持续更新中,见[前端开发]',
    //               duration: 0
    //           });
    // this.$Message.error("开发文档已在整理中。。。");
  },
  data() {
    return {
      drawerModel: false,
      text: '',
      activedIndex: 0,
      timeline: [
        {
          text: '返回首页',
          path: '/home',
          actived: false
        },
        {
          text: '项目启动与发布',
          path: '/document/guide',
          actived: false
        },
        {
          text: '代码生成',
          path: '/document/coder',
          actived: false
        },
        {
          text: '组件api',
          path: '/document/api',
          actived: false
        },
        {
          text: '前端开发',
          path: '/document/vueDev',
          actived: false,
          new: true
        },
        {
          text: '后台开发',
          path: '/document/netCoreDev',
          actived: false
        },
        {
          text: '移动端(uni-app)',
             path: '/app/home',
          actived: false
        },
        {
          text: '常见问题',
          path: '/document/issue',
          actived: false
        },
        {
          text: '更新记录',
          path: '/document/log',
          actived: false
        }
      ]
    };
  },
  watch: {
    '$route.path': function (newVal, oldVal) {
      //  var navItem = this.getNavigation(this.selectId);
      // this.activedIndex=2;
      //  console.log(navItem.name);
    }
  }
};
</script>
<style lang="less" scoped>
.links {
  display: flex;
  font-size: 15px;
  position: fixed;
  z-index: 999;
  width: 100%;
  background: black;
  box-shadow: 0px 0px 10px #524747;
  > .item {
    position: relative;
    text-align: center;
    line-height: 55px;
    // padding: 10px;
    /* float: right; */
    flex: 1;
    color: #b1b0b0;
  }
  > .item:hover {
    cursor: pointer;
    color: white;
  }
  .actived {
    color: white;
    font-weight: bold;
    span {
      border-bottom: 2px solid #fff;
    }
  }
  span {
    height: 100%;
    position: relative;
    padding: 17px 0;
  }
}

.affix {
  left: 50px;
  position: fixed;
  top: 50px;
  padding: 20px;
  border-right: 1px solid #d6d3d3;
  .actived {
    color: #ed4014;
    font-weight: bold;
  }
  li:hover {
    cursor: pointer;
  }
}
.content {
  position: relative;

  height: 100%;
  // max-width: 1350px;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 10px 30px;
  padding-top: 80px;
}
.doc-api {
  max-width: 100%;
  padding: 80px 40px;
}
.new:after {
  content: '.';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #ececea;
  top: 11px;
  border-radius: 50%;
}
</style>
<style scoped>
.view-model-content >>> .el-scrollbar > .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
